<template>
    <div id="app" class="index" :class="{'page-loading':initLoading}">
        <ui-loading v-if="initLoading" class="page-init-loading">
             <div slot="content"></div>
        </ui-loading>
        <page-error v-if="!initLoading && news.list.length == 0">
            <div slot="logo">
                <img src="../assets/page-empty.png" class="logo">
            </div>
            <div slot="text">
                <p class="text">暂无内容</p>
            </div>
        </page-error>
        <div class="ui-list" v-else>
            <transition-group class="index-list" name="list" tag="div">
                <ui-item v-for="(item,index) in news.list" :item="item" :key="item.type + '_' +item.id" 
                :params="player" 
                @playVideo="playVideo"
                @volumechange="volumeChange"
                ></ui-item>
            </transition-group>
        </div>
        <!-- en dui-list -->
    </div>
</template>
<script>
import Items from "../components/items.vue";
import mxPlayer from "../mixins/inlinePlayer.js";
import pageError from "../components/pageError.vue";
import UILoading from "../components/loading.vue";
export default {
    name: "index",
    data() {
        return {
            initLoading: true,
            news: {
                list: []
            }
        };
    },

    mixins: [mxPlayer],
    components: {
        [Items.name]: Items,
        [UILoading.name]: UILoading,
        [pageError.name]: pageError
    },
    mounted() {
        this.loadPageData(true)
            .then(rs => {})
            .catch(e => {
                this.pageError = true;
            })
            .finally(() => {
                this.$nextTick(() => {
                    this.initLoading = false;
                });
            });
    },
    methods: {
        loadPageData() {
            let url = "?ct=news&ac=get_new_list";

            return this.$http
                .get(url)
                .then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let list = [];
                        let rs = data.data;
                        for (let i = 0, len = rs.list.length; i < len; i++) {
                            if (i > 19) break;
                            let item = rs.list[i];
                            if (this.$utils.unlike.check(item.id)) return;
                            let tmpItem = item;
                            if (item.style_num == 6) {
                                //热点新闻
                                tmpItem.url =
                                    item.detail_url + "&action=preview";
                                tmpItem.type = "hot-list";
                                let childList = [];
                                toString.call(item.list) == "[object Array]" &&
                                    item.list.forEach(child => {
                                        if (this.$utils.unlike.check(child.id))
                                            return;
                                        let citem = child;
                                        citem.type =
                                            child.type == 3 ? "专题" : "";
                                        citem.url =
                                            child.detail_url +
                                            "&action=preview";

                                        citem.source = child.source;
                                        citem.view = child.browse_total;
                                        citem.time = this.$moment(
                                            child.issue_time * 1000
                                        )
                                            .fromNow()
                                            .replace(" ", "");
                                        citem.src = child.cover_img[0];
                                        childList.push(citem);
                                    });
                                tmpItem.list = childList;
                            } else {
                                tmpItem = item;
                                tmpItem.url =
                                    item.detail_url + "&action=preview";
                                tmpItem.type = (() => {
                                    switch (item.style_num) {
                                        case 1:
                                            return "special";
                                        case 2:
                                            return "normal";
                                        case 3:
                                            return "grid";
                                        case 4:
                                            return "video";
                                        case 5:
                                            return "single";
                                    }
                                })();
                                if (tmpItem.type !== "grid") {
                                    tmpItem.src = item.cover_img[0];
                                } else {
                                    tmpItem.src = item.cover_img;
                                }

                                if (tmpItem.type == "video") {
                                    tmpItem.play_status = 0;
                                }

                                tmpItem.view = item.browse_total;
                            }
                            list.push(tmpItem);
                        }

                        this.news.list = list;
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(err => {
                    this.$toast(err);
                });
        }
    }
};
</script>
<style lang="less">
// .sticky {
//     .header-search {
//         height: 0;
//         opacity: 0;
//     }
// }
.index {
    .ui-header {
        transition: transform 0.1s linear;
    }
    .search-hide {
        transform: translateY(-82px);
    }

    .popup-common {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        z-index: 999;
        border-radius: 10px;
    }

    .model-popup {
        width: 600px;
        .title {
            padding: 0 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 111px;
            border-bottom: 1px solid #eee;
            font-size: 36px;
            color: #282828;
            font-weight: bold;
            text-align: center;
        }
        .model-box {
            padding: 0 40px;
        }
        .model-item {
            position: relative;
            height: 130px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            p {
                font-size: 32px;
                color: #666;
            }

            & + .model-item {
                border-top: 1px solid #eee;
            }
        }

        .model-item.active {
            p {
                color: #e64a19;
            }
            i {
                display: inline-block;
            }
        }

        .close-btn {
            position: absolute;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url("../assets/icon-home_close.png");
            background-size: 100% 100%;
        }
    }
}

.header-search {
    transition: all 0.1s linear;
    opacity: 1;
    display: flex;
    align-items: center;
    height: 82px;
    font-size: 28px;
    padding: 0 24px;
    background-color: #fff;

    .logo img {
        margin-left: 6px;
        display: block;
        width: 50px;
        height: 50px;
    }
    .search {
        display: flex;
        align-items: center;
        padding: 0 20px;
        margin: 0 10px 0 30px;
        flex: 1;
        border-radius: 30px;
        background-color: #f6f6f6;
        font-size: 28px;
        color: #c6c6c6;
        height: 60px;

        i {
            margin-right: 12px;
        }
        input {
            background-color: transparent;
            border: none;
            outline: none;
            flex: 1;
            color: #282828;
            font-size: 28px;
            ::-webkit-input-placeholder {
                color: #c6c6c6;
            }
        }
    }

    .loc {
        display: flex;
        align-items: center;
        color: #5a4640;

        i {
            margin-left: 12px;
        }
    }
}

.ui-alert {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 330px;
    background: #fff;
    z-index: 999;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    .alert-content {
        text-align: center;
        padding: 30px;
        p {
            margin: 15px auto 35px;
            font-size: 36px;
            font-weight: 500;
            color: #282828;
        }
        span {
            line-height: 1.2;
            font-size: 32px;
            color: #666;
        }
    }
    .alert-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 81px;
            width: 50%;
            text-align: center;
            font-size: 36px;
            border-top: 1px solid #e2e2e2;
            color: #666;

            &:last-child {
                color: #e64a19;
            }

            & + a {
                border-left: 1px solid #e2e2e2;
            }
        }
    }
}

.worldcup-section {
    background-color: #fff;
    padding: 24px;
    margin: 14px 0;
    .wc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tit,
        .link {
            display: flex;
            align-items: center;
        }
        .tit {
            img {
                display: block;
                width: 36px;
                height: 36px;
                margin-right: 8px;
            }

            color: rgb(63, 65, 70);
            font-size: 24px;
            line-height: 24px;
            font-family: PingFangSC-Medium, "Source Han Sans CN", sans-serif;
        }
        .link {
            color: rgb(155, 158, 163);
            font-size: 28px;

            span {
                margin-right: 0.5em;
            }
        }
    }
    .game-list {
        padding: 30px 0;
        display: flex;
        border-bottom: 1px solid rgb(233, 233, 233);
        a {
            flex: 1;
            flex-basis: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img {
                width: 92px;
                height: 92px;
            }
            p {
                font-family: PingFangSC-Medium;
                color: rgb(63, 65, 70);
                font-size: 24px;
                height: 48px;
                line-height: 48px;
            }
        }
    }

    .txt-summarry {
        font-size: 26px;
        line-height: 70px;
        color: rgb(155, 158, 163);
        text-align: center;
        line-height: 70px;
    }

    .cts-item {
        padding-bottom: 10px;
    }
    .cts-item + .cts-item {
        border-top: 1px solid rgb(233, 233, 233);
    }
    .wc-vs {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100px;
        .data,
        .team {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .data {
            width: 316px;
            span {
                color: rgb(213, 43, 54);
                font-size: 48px;
            }
            p {
                font-size: 28px;
                color: rgb(155, 158, 163);
                margin-top: 16px;
            }
        }
    }
    .team {
        width: 160px;
        img {
            width: 48px;
            height: 48px;
        }
        p {
            margin-top: 16px;
            font-size: 30px;
            line-height: 1;
            color: rgb(51, 51, 51);
        }
    }
}

.wc-live-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 80%;
    padding: 0 20px;
    z-index: 9999;
}
.gray {
    opacity: 0.5;
    filter: grayscale(100%);
    filter: gray;
}
</style>


